import React ,{Component} from 'react';
import './Dheader.css';
import {Icon,Carousel}  from 'antd';

export default class Dheader extends Component {

    constructor(props){
        super(props);
        this.state={
            showBigImg:false
        };
        this.hanleShowBigImg = this.hanleShowBigImg.bind(this);
    }
    hanleShowBigImg = ()=>{
         this.setState({
            showBigImg:true
         })
    }
    hanleCloseBigImg = ()=>{
        this.setState({
            showBigImg:false
         })
    }

    render (){
        let {showBigImg} = this.state;
        let { Dheader } = this.props;
        let bigimg = showBigImg?<div className="bigImg" onClick={this.hanleCloseBigImg.bind(this)}>
        <Carousel effect="fade">
            {
                Dheader.gallaryImgs.map((item,i)=>{
                    return <div key={i}><img className="banner_img_big" alt="ban" src={item}/></div>
                })
            }
        </Carousel>
       </div>:'';
        return (
            <div className="Dheader">
                <div className="banner" onClick={this.hanleShowBigImg}>
                   <img className="banner_img" alt="ban" src={Dheader.bannerImg}/>
                   <div className="banner_info">
                     <div className="banner_title">{Dheader.sightName}</div>
                     <div className="banner_num">
                        <Icon type="picture" />&nbsp;&nbsp;
                        <span>3</span>
                     </div>
                   </div>
                </div>
                {bigimg}
            </div>
        )
    }
}